<script>
import { questionApi } from '@/services/api';

export default {
  data() {
    return {
      currentSubject: 0,
      loading: false,
      subjects: [
        { id: 1, name: "科目一", code: "k1" },
        { id: 2, name: "科目四", code: "k4" }
      ],
      practiceProgress: 0,
      totalQuestions: 2150,
      functionButtons: [
        { id: 1, icon: "/static/logo/jiaoche.png", text: "轿车模拟考试", type: "theory", vehicle: "C1", active: false },
        { id: 2, icon: "/static/logo/jiaoche.png", text: "轿车专项练习", type: "special", vehicle: "C1", active: false },
        { id: 3, icon: "/static/logo/huoche.png", text: "货车模拟考试", type: "theory", vehicle: "A2", active: false },
        { id: 4, icon: "/static/logo/huoche.png", text: "货车专项练习", type: "special", vehicle: "A2", active: false },
        { id: 5, icon: "/static/logo/moto.png", text: "摩托模拟考试", type: "theory", vehicle: "D", active: false },
        { id: 6, icon: "/static/logo/moto.png", text: "摩托专项练习", type: "special", vehicle: "D", active: false },
        { id: 7, icon: "/static/logo/gongjiao.png", text: "公交模拟考试", type: "theory", vehicle: "A1", active: false },
        { id: 8, icon: "/static/logo/gongjiao.png", text: "公交专项练习", type: "special", vehicle: "A1", active: false }
      ]
    };
  },
  computed: {
    progressDegree() {
      return (this.practiceProgress / this.totalQuestions) * 360;
    },
    currentSubjectCode() {
      return this.subjects[this.currentSubject].code;
    }
  },
  methods: {
    switchSubject(index) {
      this.currentSubject = index;
      this.resetButtons();
    },
    resetButtons() {
      this.functionButtons.forEach(btn => btn.active = false);
    },
    async handleMenuClick(item) {
      if (this.loading) return;
      
      try {
        // 保存考试参数到本地存储
        const examParams = {
          subject: this.currentSubjectCode,
          vehicleType: item.vehicle,
          examType: item.type === 'theory' ? 'theory' : 'special'
        };
        
        uni.setStorageSync('examParams', examParams);
        
        // 直接跳转到考试页面
        uni.navigateTo({
          url: '/pages/exam/index'
        });

      } catch (error) {
        console.error('页面跳转失败:', error);
        uni.showToast({
          title: '页面跳转失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    async startPractice() {
      if (this.loading) return;
      
      try {
        // 保存练习参数到本地存储
        const examParams = {
          subject: this.currentSubjectCode,
          vehicleType: 'ALL',
          examType: 'sequence'
        };
        
        uni.setStorageSync('examParams', examParams);
        
        // 直接跳转到考试页面
        uni.navigateTo({
          url: '/pages/exam/index'
        });

      } catch (error) {
        console.error('页面跳转失败:', error);
        uni.showToast({
          title: '页面跳转失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<template>
  <view class="container">
    <!-- 加载遮罩 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-spinner"></view>
    </view>

    <!-- 顶部科目切换 -->
    <view class="tabs">
      <view
        v-for="(tab, index) in subjects"
        :key="index"
        class="tab-item"
        :class="{ active: currentSubject === index }"
        @tap="switchSubject(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 中心练习区域和周围按钮 -->
      <view class="practice-container">
        <!-- 装饰性背景圆圈 -->
        <view class="decoration-circle"></view>

        <!-- 周围功能按钮 -->
        <view class="function-buttons">
          <view
            v-for="(item, index) in functionButtons"
            :key="index"
            class="function-button"
            :class="['position-' + index, { 'button-active': item.active, 'disabled': loading }]"
            @tap="handleMenuClick(item)"
          >
            <view class="button-wrapper">
              <image
                :src="item.icon"
                class="button-icon"
                mode="aspectFit"
              ></image>
              <text class="button-text">{{ item.text }}</text>
            </view>
          </view>
        </view>

        <!-- 中心装饰圆形 -->
        <view class="center-circle-decoration">

        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #f8f9fa, #fff);
  min-height: 100vh;
}

/* 顶部科目切换 */
.tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx 0;
  border-bottom: 1rpx solid #eee;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
  color: #666;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
  transform: scale(1.05);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: linear-gradient(to right, #007aff, #66e0ff);
  border-radius: 3rpx;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  position: relative;
}

/* 装饰性背景圆圈 */
.decoration-circle {
  position: absolute;
  width: 1100rpx;
  height: 1100rpx;
  border-radius: 50%;
  border: 2rpx dashed rgba(90, 135, 254, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 60s linear infinite;
  z-index: 0;
}

/* 添加内圈装饰 */
.decoration-circle::after {
  content: "";
  position: absolute;
  width: 900rpx;
  height: 900rpx;
  border-radius: 50%;
  border: 2rpx dashed rgba(90, 135, 254, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 练习区域容器 */
.practice-container {
  position: relative;
  width: 900rpx;
  height: 900rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中心圆形 */
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320rpx;
  height: 320rpx;
  background: linear-gradient(135deg, #5a87fe, #6e9aff);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(90, 135, 254, 0.25);
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.center-circle:active {
  transform: translate(-50%, -50%) scale(0.95);
  box-shadow: 0 4rpx 16rpx rgba(90, 135, 254, 0.2);
}

/* 进度环 */
.progress-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.progress-circle {
  position: absolute;
  width: 50%;
  height: 100%;
  transform-origin: right center;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.circle-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.progress-text {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  display: block;
}

.practice-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 6rpx;
}

.practice-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  letter-spacing: 2rpx;
}

/* 功能按钮容器 */
.function-buttons {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 单个图标按钮 */
.function-button {
  position: absolute;
  width: 160rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.button-wrapper {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 20rpx;
  width: 140rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1rpx solid rgba(90, 135, 254, 0.1);
}

.button-icon {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 12rpx;
  transition: all 0.3s ease;
}

.button-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/* 按钮悬浮和激活状态 */
.function-button:hover .button-wrapper {
  transform: translateY(-6rpx);
  box-shadow: 0 12rpx 32rpx rgba(90, 135, 254, 0.15);
  border-color: rgba(90, 135, 254, 0.2);
}

.button-active .button-wrapper {
  background: linear-gradient(135deg, #5a87fe, #6e9aff);
  transform: translateY(-6rpx);
  box-shadow: 0 12rpx 32rpx rgba(90, 135, 254, 0.25);
}

.button-active .button-text {
  color: #ffffff;
}

/* 八个按钮的位置调整 */
.position-0 {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.position-1 {
  top: 12%;
  right: 12%;
  transform: translate(30%, -30%) rotate(45deg);
}

.position-1 .button-wrapper {
  transform: rotate(-45deg);
}

.position-2 {
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

.position-3 {
  bottom: 12%;
  right: 12%;
  transform: translate(30%, 30%) rotate(-45deg);
}

.position-3 .button-wrapper {
  transform: rotate(45deg);
}

.position-4 {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.position-5 {
  bottom: 12%;
  left: 12%;
  transform: translate(-30%, 30%) rotate(45deg);
}

.position-5 .button-wrapper {
  transform: rotate(-45deg);
}

.position-6 {
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
}

.position-7 {
  top: 12%;
  left: 12%;
  transform: translate(-30%, -30%) rotate(-45deg);
}

.position-7 .button-wrapper {
  transform: rotate(45deg);
}

/* 加载遮罩样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 禁用状态样式 */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 按钮点击效果 */
.button-wrapper:active {
  transform: scale(0.95);
}

/* 中心圆形点击效果 */
.center-circle:active {
  transform: translate(-50%, -50%) scale(0.95);
}
</style>